<template>
	<view class="content">
		<!--头部用户信息-->
		<view class="header">
			<view class="clear-both" @tap="gotoUserinfo">
				<view class="">
					<image :src="headimg" mode="aspectFill" class="userHeader float-l"></image>
					<view class="headerr float-r">
						<view class="fs16 color3 float-l headerrname">{{nickname}}</view>
						<image src="/static/tabbar/index/setup.png" mode="aspectFill" class="float-r headerrimg"></image>
						<!-- <view class="header2"><text class="fs12 color9 text-over float-l">贝思客第一打野</text>
						<image src="../../static/tabbar/user/brush.png" class="editor float-r"></image>
					</view> -->
						<!-- <view class="header3">
						<text class="fs14 color3 text1">12.3w</text>
						<text class="fs12 color9 text2">获赞</text>
						<text class="fs14 color3 text1">5.1w</text>
						<text class="fs12 color9 text2">收藏</text>
						<text class="fs14 color3 text1">3000</text>
						<text class="fs12 color9 text2">粉丝</text>
					</view> -->
					</view>
				</view>
			</view>
			<view class="userOth clear-both">
				<view class="userOths float-l">
					<view class="fs20 colorm">{{couponsCount}}</view>
					<view class="fs12 color9 userOthss">我的优惠券</view>
				</view>
				<view class="userOths float-l">
					<view class="fs20 colorm text-over userOthsss">{{balance}}</view>
					<view class="fs12 color9 userOthss">账户余额</view>
				</view>
				<view class="userOths userOths0 float-l">
					<view class="fs20 colorm text-over userOthsss">{{scores}}</view>
					<view class="fs12 color9 userOthss">会员积分</view>
				</view>
			</view>
		</view>
		<!--五个状态-->
		<view class="status clear-both">
			<view class="statuss float-l" v-for="(item,index) in statusList" :key="index" @tap="gotoOtherPage(item.name)">
				<image :src="item.img" mode="aspectFill" class="statussImg"></image>
				<view class="statussName fs12 color3">{{item.name}}</view>
			</view>
		</view>
		<!--会员等级-->
		<!-- <view class="vip clear-both">
			<view class="float-l fs18 color3">会员等级</view>
			<view class="float-r clear-both">
				<text class="float-l fs15 colorFF6">普通</text>
				<image src="http://iph.href.lu/20x20?bg=666666" mode="aspectFill" class="float-r vipImg"></image>
			</view>
		</view> -->
		<!--12个分类-->
		<view class="twelve">
			<!-- <view class="twelve-item clear-both" v-show="twelveList1.length>0">
				<view :class="['items','float-l',{items0:index==twelveList1.length-1}]" v-for="(item,index) in twelveList1" :key="index">
					<image :src="item.img" mode="aspectFill" class="itemsImg"></image>
					<view class="fs12 color3">{{item.name}}</view>
				</view>
			</view>
			<view class="twelve-item clear-both" v-show="twelveList2.length>0">
				<view :class="['items','float-l',{items0:index==twelveList2.length-1}]" v-for="(item,index) in twelveList2" :key="index">
					<image :src="item.img" mode="aspectFill" class="itemsImg"></image>
					<view class="fs12 color3">{{item.name}}</view>
				</view>
			</view> -->
			<view class="twelve-item clear-both twelve-item0" v-show="twelveList3.length>0">
				<view :class="['items','float-l',{items0:index==twelveList3.length-1}]" v-for="(item,index) in twelveList3" :key="index"
				 @tap="gotoOtherPage(item.name)">
					<image :src="item.img" mode="aspectFill" class="itemsImg"></image>
					<view class="fs12 color3">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import uploadimg from '@/api/upload/index.js'
	import local_userinfo from '@/util/user/local-userinfo.js'

	export default {
		data() {
			return {
				statusList: [{
						name: '全部订单',
						img:this.$resBaseurl+ '/act/mrhappy/qbdd.png'
					},
					{
						name: '待付款',
						img: this.$resBaseurl+ '/act/mrhappy/dfk.png'
					},
					{
						name: '待配送',
						img: this.$resBaseurl+ '/act/mrhappy/dps.png'
					},
					{
						name: '配送中',
						img: this.$resBaseurl+ '/act/mrhappy/psz.png'
					},
					{
						name: '已完成',
						img: this.$resBaseurl+ '/act/mrhappy/ywc.png'
					}
				],

				twelveList1: [
					// {
					// 	name: '我的点赞',
					// 	img: 'http://iph.href.lu/50x50?bg=666666'
					// },
					// {
					// 	name: '我的收藏',
					// 	img: 'http://iph.href.lu/50x50?bg=666666'
					// },
					// {
					// 	name: '我的关注',
					// 	img: 'http://iph.href.lu/50x50?bg=666666'
					// },
					// {
					// 	name: '我的发布',
					// 	img: 'http://iph.href.lu/50x50?bg=666666'
					// }
				],

				twelveList2: [
					// {
					// 	name: '地址管理',
					// 	img: 'http://iph.href.lu/50x50?bg=666666'
					// },
					// {
					// 	name: '我的拼图',
					// 	img: 'http://iph.href.lu/50x50?bg=666666'
					// },
					// {
					// 	name: '我的试用',
					// 	img: 'http://iph.href.lu/50x50?bg=666666'
					// },
					// {
					// 	name: '我的分享',
					// 	img: 'http://iph.href.lu/50x50?bg=666666'
					// }
				],

				twelveList3: [{
						name: '地址管理',
						img:this.$resBaseurl+ '/act/mrhappy/dzgl.png',
						url: '/pages/address/address-list/address-list'
					},
					// {
					// 	name: '在线客服',
					// 	img: 'http://iph.href.lu/50x50?bg=666666'
					// },
					{
						name: '证照信息',
						img: this.$resBaseurl+ '/act/mrhappy/zzxx.png'
					},
					{
						name: '服务协议',
						img: this.$resBaseurl+ '/act/mrhappy/fwxy.png'
					}
				],

				nologinheadimg: this.$resBaseurl + '/act/mrhappy/user.png?v=' + (new Date()).getHours(),
				headimg: 'https://res.bestcake.com/m-images/order/mw-person-tx.png',
				nickname: '',
				usertag: '',
				balance: 0,
				scores: 0,
				couponsCount: 0,
				isvip: 0,
				viplevel: '',

			}
		},
		onLoad: function() {
			// #ifdef MP-WEIXIN
			uni.hideShareMenu()
			// #endif
		},
		onShow: function() {
			this.init()
		},
		methods: {
			init() {
				let user = local_userinfo.getUserinfo()
				if (user) {
					this.headimg = user.headimg || 'https://res.bestcake.com/m-images/order/mw-person-tx.png'
					this.nickname = user.loginname || user.phone;
					this.usertag = ''
					this.balance = user.balance || 0
					this.loginstate = true
				} else {
					this.headimg = this.$resBaseurl + '/act/mrhappy/user.png?v=' + (new Date()).getHours();
					this.nickname = "未登录"
					this.loginstate = false
				}
			},
			gotoUserinfo() {
				//先判断是否登录
				let wanttoUrlCopy = '/pages/tabBar/user'
				let jumpUrl = ''
				// #ifdef H5
				jumpUrl = '/pages/login/common'
				// #endif
				// #ifndef H5
				jumpUrl = '/pages/login/quick'
				// #endif

				this.$checkLoginState.checkloginstate(() => {
					uni.navigateTo({
						url: '/pages/user-edit/user-edit'
					})
				}, () => {
					uni.navigateTo({
						url: jumpUrl + '?redirect=' + wanttoUrlCopy
					})
				});
			},
			gotoOtherPage(name) {
				switch (name) {
					case '待付款':
						//
						uni.navigateTo({
							url: '/pages/my-oreder/my-oreder?status=' + (name)
						})
						break;
					case '待配送':
						//
						uni.navigateTo({
							url: '/pages/my-oreder/my-oreder?status=' + (name)
						})
						break;
					case '配送中':
						//
						uni.navigateTo({
							url: '/pages/my-oreder/my-oreder?status=' + (name)
						})
						break;
					case '已完成':
						//
						uni.navigateTo({
							url: '/pages/my-oreder/my-oreder?status=' + (name)
						})
						break;
					case '全部订单':
						//
						uni.navigateTo({
							url: '/pages/my-oreder/my-oreder?status=' + (name)
						})
						break;
					case '地址管理':
						//
						uni.navigateTo({
							url: '/pages/address/address-list/address-list'
						})
						break;
					case '在线客服':
						//
						break;
					case '证照信息':
						uni.navigateTo({
							url: '/pages/webview/webview?redirectUrl=' + encodeURIComponent(
								'https://m.bestcake.com/ww/user-certificate')
						})
						break;
					case '服务协议':
						uni.navigateTo({
							url: '/pages/webview/webview?redirectUrl=' + encodeURIComponent(
								'https://m.bestcake.com/policy')
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>
<style lang="scss" scoped="true">
	.content {
		.header {
			padding: 6.1334vw 4.2667vw 7.2vw 4.2667vw;
			border-bottom: 2.667vw solid #FAFAFA;

			.userHeader {
				width: 20.0667vw;
				height: 20.0667vw;
				border-radius: 50%;
			}

			.headerr {
				width: 69.2665vw;
				margin-left: 2.1334vw;
				height: 20.0667vw;

				.headerrname {
					height: 20.0667vw;
					line-height: 20.0667vw;
				}

				.headerrimg {
					width: 6.0667vw;
					height: 6.0667vw;
					display: block;
					margin-top: 7vw;
				}
			}

			.userOth {
				margin-top: 5.8667vw;
				display: table;
				width: 100%;

				.userOths {
					text-align: center;
					width: 33.1%;
					border-right: 2upx solid #f2f2f2;

					.userOthss {
						margin-top: 1.8667vw;
					}

					.userOthsss {
						width: 100%;
					}
				}

				.userOths0 {
					border-right: none;
				}
			}
		}

		.status {
			padding: 5.334vw 4.2667vw;
			border-bottom: 2.667vw solid #FAFAFA;

			.statuss {
				width: 20%;
				text-align: center;

				.statussImg {
					width: 12.8vw;
					height: 12.8vw;
					display: block;
					margin: 0 auto;
				}

				.statussName {
					margin-top: 2.1334vw;
				}
			}
		}

		.vip {
			padding: 4.2667vw;
			border-bottom: 2.667vw solid #FAFAFA;

			.vipImg {
				width: 5.8667vw;
				height: 5.8667vw;
				margin-left: 1.6vw;
			}
		}

		.twelve {
			padding: 0 4.2667vw;
			// border-bottom: 2.667vw solid #FAFAFA;

			.twelve-item {
				padding: 5.334vw 0;
				border-bottom: 2upx solid #F2F2F2;

				.items {
					width: 12.8vw;
					margin-right: 13.334vw;
					white-space: nowrap;

					.itemsImg {
						width: 12.8vw;
						height: 12.8vw;
						display: block;
						margin: 0 auto;
						margin-bottom: 2.1334vw;
					}
				}

				.items0 {
					margin-right: 0;
				}
			}

			.twelve-item0 {
				border-bottom: none;
			}
		}
	}
</style>
